<script lang="ts" setup>
import { type FormInstance, type FormRules } from 'element-plus'
import type { ActionForm } from '@/api/resource/types'
import * as action from '@/api/resource/action'

const props = reactive<FormDialogProp>({
    title: '',
    visible: false
})

const defaultForm: () => ActionForm = () => ({
    name: '',
    code: '',
    parentId: ''
})

const formRef = ref<FormInstance>()
const formData = ref(defaultForm())
const rules = reactive<FormRules<ActionForm>>({
    name: [
        { required: true, message: '资源名称不能为空', trigger: 'blur'},
        { max: 16, message: '资源名称不能超过16个字', trigger: 'blur'}
    ],
    code: [
        { required: true, message: '资源代码不能为空', trigger: 'blur'},
        { max: 32, message: '资源代码不能超过16个字', trigger: 'blur'}
    ],
    parentId: [
        { required: true, message: '上级菜单不能为空', trigger: 'blur'}
    ],
    sort: [
        { required: true, message: '排序不能为空', trigger: 'blur' },
        { type: 'integer', message: '排序必须为数字', trigger: 'blur'}
    ]
})

const parentTreeProps = {
    children: 'children',
    label: 'name'
}
const parentTreeData = inject('resource-tree')

const open = async (obj: FormDialogProp) => {
    if(obj.id === undefined) {
        formData.value = defaultForm()
    } else {
        formData.value = await action.get(obj.id)
    }

    props.title = obj.title
    props.visible = true
    props.id = obj.id
}

defineExpose({
    open
})

const emit = defineEmits(['close'])

const submit = async () => {
    if(!formRef.value) return

    await formRef.value.validate(async (valid: boolean) => {
        if(valid) {
            let result: ApiResult<string>
            if(props.id === undefined){
                result = await action.add(formData.value)
            } else {
                result = await action.edit(props.id, formData.value)
            }
            
            if(result.success) {
                ElMessage.success(result.message)
                emit('close')
                props.visible = false
            } else {
                ElMessage.error(result.message)
            }
        }
    })
}
</script>

<template>
    <el-dialog v-model="props.visible" :title="props.title" header-class="dialog-header">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
            <el-form-item prop="name" label="资源名称">
                <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item prop="code" label="资源代码">
                <el-input v-model="formData.code"></el-input>
            </el-form-item>
            <el-form-item prop="parentId" label="上级菜单">
                <el-tree-select v-model="formData.parentId" :data="parentTreeData" :props="parentTreeProps" node-key="id" check-strictly></el-tree-select>
            </el-form-item>
            <el-form-item prop="sort" label="排序">
                <el-input v-model.number="formData.sort"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submit">保存</el-button>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped>
.dialog-header {
    text-align: left;
    margin: 0 30px 15px 30px;
}
</style>